// stylelint-disable selector-max-type, block-opening-brace-space-before, no-duplicate-selectors

// Base button styles
.btn {
  position: relative;
  display: inline-block;
  // stylelint-disable-next-line primer/spacing
  padding: 5px $spacer-3;
  font-size: $body-font-size;
  font-weight: $font-weight-semibold;
  // stylelint-disable-next-line primer/typography
  line-height: 20px; // Specifically not inherit our `<body>` default
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: $border-width $border-style;
  border-radius: $border-radius;
  appearance: none; // Corrects inability to style clickable `input` types in iOS.

  &:hover {
    text-decoration: none;
  }

  &:disabled,
  &.disabled,
  &[aria-disabled="true"] {
    cursor: default;

    .octicon {
      color: inherit;
    }
  }

  i {
    font-style: normal;
    font-weight: $font-weight-semibold;
    opacity: 0.75;
  }

  .octicon {
    margin-right: $spacer-1;
    color: $text-gray-light;
    vertical-align: text-bottom;

    &:only-child {
      margin-right: 0;
    }
  }

  .Counter {
    // stylelint-disable-next-line primer/spacing
    margin-left: 2px;
    color: inherit;
    text-shadow: none;
    vertical-align: top;
    // stylelint-disable-next-line primer/colors
    background-color: rgba(
      $black,
      0.08
    ); // Darken for just a tad more contrast against the button background
  }

  .dropdown-caret {
    margin-left: $spacer-1;
    opacity: 0.8;
  }
}

// Default button

.btn {
  $bg-default: $bg-gray-light;
  $bg-hover: #f3f4f6; // custom gray
  $bg-active: darken($bg-hover, 2%);
  $bg-disabled: $bg-default;

  color: $text-gray-dark;
  background-color: $bg-default;
  border-color: $border-color-button;
  box-shadow: $box-shadow, $box-shadow-highlight;
  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);

  &:hover,
  &.hover,
  [open] > & {
    background-color: $bg-hover;
    transition-duration: 0.1s;
  }

  &:active,
  &.selected,
  &[aria-selected="true"] {
    background-color: $bg-active;
    box-shadow: $box-shadow-inset;
    transition: none;
  }

  &:disabled,
  &.disabled,
  &[aria-disabled="true"] {
    // stylelint-disable-next-line primer/colors
    color: $gray-400;
    background-color: $bg-disabled;
    border-color: $border-color-button;
  }

  // Keep :focus after :disabled. Allows to see the focus ring even on disabled buttons
  &:focus,
  &.focus {
    outline: 1px dotted transparent; // Support Firfox custom colors
    outline-offset: 2px;
    box-shadow: $box-shadow-focus;
  }
}

// Primary button

.btn-primary {
  $bg-default: #2ea44f; // custom green
  $bg-hover: #2c974b; // custom green
  $bg-active: darken($bg-hover, 2%);
  $bg-disabled: #94d3a2; // custom green

  $shadow: $green-900;
  $box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);

  color: $text-white;
  background-color: $bg-default;
  // stylelint-disable-next-line primer/borders
  border-color: rgba($black, 0.15);
  box-shadow: $box-shadow;

  &:hover,
  &.hover,
  [open] > & {
    background-color: $bg-hover;
  }

  &:active,
  &.selected,
  &[aria-selected="true"] {
    background-color: $bg-active;
    // stylelint-disable-next-line primer/box-shadow
    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
  }

  &:disabled,
  &.disabled,
  &[aria-disabled="true"] {
    // stylelint-disable-next-line primer/colors
    color: rgba($text-white, 0.8);
    background-color: $bg-disabled;
    // stylelint-disable-next-line primer/borders
    border-color: rgba($black, 0.1);
    box-shadow: $box-shadow;
  }

  &:focus,
  &.focus {
    // stylelint-disable-next-line primer/box-shadow
    box-shadow: 0 0 0 3px rgba($bg-default, 0.4);
  }

  .Counter {
    color: inherit;
    // stylelint-disable-next-line primer/colors
    background-color: rgba($bg-white, 0.2);
  }

  .octicon {
    // stylelint-disable-next-line primer/colors
    color: rgba($text-white, 0.8);
  }
}

// Mixin: btn-inverse-on-hover

@mixin btn-inverse-on-hover($color, $bg-hover, $bg-active, $shadow) {
  color: $color;
  transition: none;

  &:hover,
  [open] > & {
    color: $text-white;
    background-color: $bg-hover;
    border-color: rgba($black, 0.15);
    box-shadow: 0 1px 0 rgba($black, 0.1), inset 0 1px 0 rgba($white, 0.03);

    .Counter {
      background-color: rgba($bg-white, 0.2);
    }

    .octicon {
      color: inherit;
    }
  }

  &:active,
  &.selected,
  &[aria-selected="true"] {
    color: $text-white;
    background-color: $bg-active;
    border-color: rgba($black, 0.15);
    box-shadow: inset 0 1px 0 rgba($shadow, 0.2);
  }

  &:disabled,
  &.disabled,
  &[aria-disabled="true"] {
    color: rgba($color, 0.5);
    background-color: $bg-gray-light;
    border-color: $border-color-button;
    box-shadow: $box-shadow, $box-shadow-highlight;

    .Counter {
      background-color: rgba($color, 0.05);
    }
  }

  &:focus {
    box-shadow: 0 0 0 3px rgba($bg-hover, 0.4);
  }

  .Counter {
    color: inherit;
    background-color: rgba($color, 0.1);
  }
}

// Danger button

.btn-danger {
  @include btn-inverse-on-hover(
    $color: $text-red,
    $bg-hover: $red-600,
    $bg-active: darken($red-600, 3%),
    $shadow: $red-900
  );
}

// Outline button

.btn-outline {
  @include btn-inverse-on-hover(
    $color: $blue-500,
    $bg-hover: $blue-500,
    $bg-active: darken($blue-500, 3%),
    $shadow: $blue-900
  );
}

// Solid buttons TODO: Deprecate?
//
//
.btn-blue {
  @include btn-solid(
    $text-white,
    lighten($blue-500, 8%),
    darken($blue-500, 2%)
  );
}

// Sizes
//
// Tweak `line-height` to make them smaller.
.btn-sm {
  // stylelint-disable-next-line primer/spacing
  padding: 3px 12px;
  font-size: $font-size-small;
  // stylelint-disable-next-line primer/typography
  line-height: 20px;

  .octicon {
    vertical-align: text-top;
  }
}

// Large button adds more padding around text. Use font-size utils to increase font-size.. e.g, <p class="text-gamma"><button class="btn btn-large btn-primary" type="button">Big green button</button></p>
.btn-large {
  padding: $em-spacer-6 1.5em;
  font-size: inherit;
  line-height: $lh-default;

  // stylelint-disable-next-line primer/borders
  border-radius: 0.5em;
}

// Full-width button
//
// These buttons expand to the full width of their parent container
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}
